<template>
  <div class="dashboard">
    <el-card shadow="never" class="welcome-card">
      <div class="welcome-content">
        <div>
          <h1>欢迎回来，张老师！</h1>
          <p class="subtitle">今天是2023年11月15日，星期三，您有3个待办事项</p>
        </div>
        <el-button type="primary" size="large">查看待办事项</el-button>
      </div>
    </el-card>

    <div class="stats-container">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(stat, index) in stats" :key="index">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-content">
              <div class="stat-icon" :style="{ backgroundColor: stat.color }">
                <el-icon :size="24"><component :is="stat.icon" /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-value">{{ stat.value }}</div>
                <div class="stat-title">{{ stat.title }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="quick-actions">
      <h2>快捷操作</h2>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" v-for="(action, index) in quickActions" :key="index">
          <el-card shadow="hover" class="action-card" @click="handleAction(action)">
            <div class="action-content">
              <el-icon :size="32" :color="action.color"><component :is="action.icon" /></el-icon>
              <div class="action-title">{{ action.title }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {
  User,
  Notebook,
  School,
  Calendar,
  DocumentAdd,
  Upload,
  Download,
  Setting
} from '@element-plus/icons-vue';

const stats = [
  { title: '待批改作业', value: 12, icon: Notebook, color: '#36a3f7' },
  { title: '班级数量', value: 8, icon: School, color: '#34bfa3' },
  { title: '未读消息', value: 5, icon: User, color: '#f4516c' },
  { title: '近期活动', value: 3, icon: Calendar, color: '#ffb822' }
];

const quickActions = [
  { title: '发布作业', icon: DocumentAdd, color: '#36a3f7' },
  { title: '上传课件', icon: Upload, color: '#34bfa3' },
  { title: '下载资料', icon: Download, color: '#f4516c' },
  { title: '班级管理', icon: School, color: '#ffb822' },
  { title: '课程设置', icon: Setting, color: '#6f42c1' },
  { title: '活动创建', icon: Calendar, color: '#20c997' }
];

const handleAction = (action) => {
  console.log(`执行操作: ${action.title}`);
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.welcome-card {
  border-radius: 10px;
  margin-bottom: 20px;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-content h1 {
  font-size: 24px;
  margin: 0;
}

.subtitle {
  color: #606266;
  margin: 5px 0 0;
}

.stats-container {
  margin-bottom: 30px;
}

.stat-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.stat-info {
  margin-left: 15px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
}

.stat-title {
  font-size: 14px;
  color: #909399;
}

.quick-actions {
  margin-top: 30px;
}

.quick-actions h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #303133;
}

.action-card {
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s;
  margin-bottom: 20px;
}

.action-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.action-content {
  text-align: center;
  padding: 20px 10px;
}

.action-title {
  margin-top: 10px;
  font-weight: 500;
}
</style>
